.ChatList-wrapper {
  display: flex;
  flex-direction: column;
  width: 66px;
  height: 100%;
  transition: width 0.3s cubic-bezier(0.18, 0.89, 0.68, 1.04);
  overflow: hidden;
  &.open {
    width: 230px;
    .SessionList-scrollView {
      height: calc(~'100% - 71px') !important;
    }
    .ChatList-sessionList-wrapper {
      height: calc(~'100% - 44px');
    }
    .SessionList-info {
      opacity: 1;
    }
  }
  &.hide {
    width: 0;
    display: none;
  }
}

.ChatList-blur {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-attachment: fixed;
  filter: blur(10px) saturate(1.5);
  position: absolute;
  top: 0;
  left: 0;
}

.ChatList-ContextMenu {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

#chatFeedDialog {
  .header {
    margin-left: 20px;
    height: 60px;
    color: #333;
    .title {
      font-size: 17px !important;
      margin-top: 20px;
    }
    .dialogCloseBtn {
      font-size: 20px;
      margin-top: 20px;
      margin-right: 20px;
    }
  }
  .dialog_loadings {
    margin-top: 96px;
  }
  .dialogContent {
    min-height: 237px;
    padding: 0;
    border-top: 1px solid #ddd;
    .postCard {
      margin: 0 !important;
    }
  }
}
.chatFeedDialog {
  .mui-dialog-body {
    padding: 15px 20px 0 15px !important;
    border-top: 1px solid #ddd;
    .z-depth-1, nav, .card-panel, .card {
      box-shadow: none !important;
    }
  }
}

@iconTypes: "system", "post", "calendar", "task", "knowledge", "uploadhelper",
  "hr", "approval", "check", "dossier", "score", "worksheet", "workflow";
@calendarDateColor: #e85c72;

// definition
.buildIconClass(@iterator: 1) when (@iterator <= length(@iconTypes)) {
  @prefix: escape("chat_");
  @urlExt: escape(".png");
  @type: escape(extract(@iconTypes, @iterator));
  .@{prefix}@{type} {
    @urlPath: "./icons/@{prefix}@{type}";
    @url: "@{urlPath}@{urlExt}";
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url("./icons/@{prefix}@{type}@{urlExt}");

    &[data-date]:before when (extract(@iconTypes, @iterator) = "calendar") {
      font-size: 20px;
      position: absolute;
      display: inline-block;
      width: 100%;
      content: attr(data-date);
      transform: scale(0.5);
      text-align: center;
      color: @calendarDateColor;
    }
  }
  .buildIconClass(@iterator + 1);
}

.buildIconClass();

